<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原始命令列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <style>
        .commands-container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: 100vh;
        }

        .section-card {
            background: #fff;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .card-body {
            padding: 20px;
        }

        .search-form {
            margin-bottom: 20px;
        }

        /* 美化表格样式 */
        .el-table {
            margin-bottom: 20px;
        }

        .el-table th {
            background-color: #f5f7fa !important;
            color: #606266;
            font-weight: 600;
            text-align: center !important;
        }

        .el-table td {
            text-align: center;
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background: #fafafa;
        }

        /* 美化分页样式 */
        .pagination-container {
            margin-top: 20px;
            padding: 10px 0;
            text-align: right;
            background-color: #fff;
            border-top: 1px solid #f0f0f0;
        }

        .command-detail {
            padding: 20px;
        }

        .command-detail .title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #303133;
        }

        .command-detail .content {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            margin-bottom: 20px;
        }

        .command-detail .result {
            margin-top: 20px;
        }

        .command-detail .result-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #303133;
        }

        .command-detail .result-content {
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #e4e7ed;
        }
    </style>
</head>
<body>
    <div id="raw-commands">
        <div class="commands-container">
            <el-card class="section-card">
                <div slot="header" class="card-header">
                    <el-button type="primary" size="small" @click="handleSearch">
                        <i class='bx bx-search'></i> 查询
                    </el-button>
                </div>
                <div class="card-body">
                    <!-- 任务列表 -->
                    <el-table 
                        :data="commands" 
                        style="width: 100%"
                        stripe
                        border
                        highlight-current-row
                        @row-dblclick="handleRowDblClick">
                        <el-table-column prop="id" label="任务ID" width="120" align="center"></el-table-column>
                        <el-table-column prop="type" label="任务类型" width="120" align="center">
                            <template slot-scope="scope">
                                <el-tag size="small" effect="plain">{{scope.row.type}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="retentionTime" label="保留时长" width="120" align="center"></el-table-column>
                        <el-table-column prop="status" label="任务状态" width="100" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="getStatusType(scope.row.status)" size="small" effect="light">
                                    {{scope.row.status}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="publishTime" label="发布时间" width="180" align="center"></el-table-column>
                        <el-table-column prop="completeTime" label="执行时间" min-width="180" align="center"></el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <div class="pagination-container">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total"
                            background>
                        </el-pagination>
                    </div>
                </div>
            </el-card>

            <!-- 源码展示抽屉 -->
            <el-drawer
                title="命令详情"
                :visible.sync="drawer.visible"
                direction="rtl"
                size="40%">
                <div class="command-detail">
                    <div class="title">源码命令</div>
                    <div class="content">{{ drawer.sourceCode }}</div>
                    
                    <div class="result">
                        <div class="result-title">执行结果</div>
                        <div class="result-content" :style="{ color: drawer.result === '执行成功' ? '#67C23A' : '#F56C6C' }">
                            {{ drawer.result }}
                        </div>
                    </div>

                    <div class="result">
                        <div class="result-title">响应结果源码</div>
                        <div class="content">{{ drawer.responseCode }}</div>
                    </div>
                </div>
            </el-drawer>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#raw-commands',
            data() {
                return {
                    commands: [
                        {
                            id: 'CMD001',
                            type: '定时数据采集',
                            retentionTime: '7天',
                            status: '已执行',
                            publishTime: '2024-02-25 10:00:00',
                            completeTime: '2024-02-25 10:01:00',
                            sourceCode: '0023103a103d5daacf40000d0257020702c702ffffffff',
                            responseCode: '0027103a103c67be50491167be505b',
                            result: '执行成功'
                        },
                        {
                            id: 'CMD002',
                            type: '告警数据上报',
                            retentionTime: '永久',
                            status: '已发布',
                            publishTime: '2024-02-25 11:00:00',
                            completeTime: '--',
                            sourceCode: '0023103a103d5daacf40000d0257020702c702eeeeeeee',
                            responseCode: '--',
                            result: '等待执行'
                        }
                    ],
                    taskTypes: [
                        '定时数据采集',
                        '告警数据上报',
                        '告警联动任务',
                        '设备控制任务',
                        '设备采集任务',
                        '自动校时任务'
                    ],
                    taskStatuses: [
                        '已发布',
                        '已下发',
                        '已执行',
                        '已过期',
                        '已删除'
                    ],
                    pagination: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 100
                    },
                    drawer: {
                        visible: false,
                        sourceCode: '',
                        responseCode: '',
                        result: ''
                    }
                }
            },
            methods: {
                getStatusType(status) {
                    const statusMap = {
                        '已发布': 'primary',
                        '已下发': 'warning',
                        '已执行': 'success',
                        '已过期': 'info',
                        '已删除': 'danger'
                    };
                    return statusMap[status] || 'info';
                },
                handleSearch() {
                    this.$message({
                        message: '正在查询数据...',
                        type: 'info'
                    });
                    // 这里添加查询逻辑
                },
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    // 这里重新加载数据
                },
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    // 这里重新加载数据
                },
                handleRowDblClick(row) {
                    this.drawer.sourceCode = row.sourceCode;
                    this.drawer.responseCode = row.responseCode;
                    this.drawer.result = row.result;
                    this.drawer.visible = true;
                }
            }
        })
    </script>
</body>
</html>